import React from 'react';
import {connect} from 'dva'
import {Row, Col, Form, InputNumber, Input, Button, Table, Select, Modal, message} from 'antd';

const R = require('ramda');
import RecAccSelect from '../../../components/commons/RecAccSelect'
import Constants from "../../../utils/Constants";

const FormItem = Form.Item;

export default connect(({lessee}) => ({lessee}))(Form.create({wrappedComponentRef: true})(class AccountInfos extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                open: false,
                disabled: true,
                type: "",

            }
        }


        handleResetFields = () => {
            this.props.form.resetFields()
            this.props.dispatch({type: 'customerManage/setRecAcc', payload: {recAcc: {}} });
            this.props.dispatch({type:'lessee/refreshState', payload: {lesseeResourse: {}} })
        }

        handleOpen = (type) => {
            this.state.type = type;
            this.setState({open: true})
        }

        setStatementType = (value) => {
            this.props.setStatementType(value);
        }

        handleConfirm = () => {
            let flag = false;
            this.props.form.validateFields((errors, values) => {
                if (errors) return;

                flag = true;
                this.props.setStatementType(values.type);
            })

            return flag;
        }

        setAccountInfo = (value) => {
            if (value) {
                this.props.dispatch({
                    type: 'customerManage/getRecAccById',
                    payload: {
                        id: value
                    }
                });
            }

        }

        setDeclarationList = (value) => {
            if (value) {
                this.props.dispatch({
                    type: 'lessee/getLesseeResourceById',
                    payload: {
                        id: value
                    }
                });
            }

        }

        render() {
            const {getFieldDecorator} = this.props.form;
            const formItemLayout = {labelCol: {xs: {span: 8}, sm: {span: 8}}, wrapperCol: {xs: {span: 15}, sm: {span: 14}}};
            let recAccData = R.isNil(this.props.customerManage.recAcc) ? {} : this.props.customerManage.recAcc;

            let individualList = this.props.lessee && this.props.lessee.individualList ? this.props.lessee.individualList : [];
            let lesseeResourse = this.props.lessee && this.props.lessee.lesseeResourse ? this.props.lessee.lesseeResourse : {};
            return (

                <Form>
                    <Row>
                        <Col span={11}>
                            <FormItem {...formItemLayout} label="账户余额" hasFeedback>
                                {getFieldDecorator('name', {
                                    initialValue: recAccData.name
                                })(
                                    <Input maxLength="20" disabled={true}/>
                                )}
                            </FormItem>
                        </Col>
                        {this.props.businessType === Constants.NUMBER_TWO ?
                            <Col span={11}>
                                <FormItem {...formItemLayout} label="第一收款人" hasFeedback>
                                    {getFieldDecorator('privateCstName', {
                                        rules: [{
                                            required: true, message: '请选择第一收款人'
                                        }],
                                        initialValue: ''
                                    })(
                                        <Select style={{width: '100%'}} showSearch
                                                placeholder="可通过输入关键字搜索"
                                                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                                onChange={this.setDeclarationList.bind(this)}>
                                            {
                                                individualList.map(item => {
                                                    return (<Select.Option value={item.id}
                                                                           key={item.id}>{item.name}</Select.Option>);
                                                })
                                            }
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>
                            :
                            <Col span={11}>
                                <FormItem {...formItemLayout} label="收款人" hasFeedback>
                                    {getFieldDecorator('country', {
                                        rules: [{
                                            required: true, message: '请输入收款人'
                                        }],
                                        initialValue: ''
                                    })(
                                        <RecAccSelect cstId={this.props.cstId} style={{width: '100%'}} blank={true}
                                                      onChange={this.setAccountInfo.bind(this)}/>
                                    )}
                                </FormItem>
                            </Col>
                        }
                    </Row>
                    {this.props.businessType === Constants.NUMBER_TWO ?
                            <Row>
                                <Col span={11}>
                                    <FormItem {...formItemLayout} label="开户银行" hasFeedback>
                                        {getFieldDecorator('addresss', {
                                            initialValue: lesseeResourse.bankbranch ? lesseeResourse.bankbranch : null
                                        })(
                                            <Input maxLength="20" disabled={true}/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={11}>
                                    <FormItem {...formItemLayout} label="收款账号" hasFeedback>
                                        {getFieldDecorator('linkmans', {
                                            initialValue: lesseeResourse.payeeno ? lesseeResourse.payeeno : null
                                        })(
                                            <Input maxLength="30" disabled={true}/>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            :
                            <Row>
                                <Col span={11}>
                                    <FormItem {...formItemLayout} label="开户银行" hasFeedback>
                                        {getFieldDecorator('address', {
                                            initialValue: R.isNil(recAccData.list) ? null : recAccData.list[0].bankbranch
                                        })(
                                            <Input maxLength="20" disabled={true}/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={11}>
                                    <FormItem {...formItemLayout} label="收款账号" hasFeedback>
                                        {getFieldDecorator('linkman', {
                                            initialValue: R.isNil(recAccData.list) ? null : recAccData.list[0].payeeno
                                        })(
                                            <Input maxLength="30" disabled={true}/>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                    }
                    <Row>
                        <Col span={11}>
                            <FormItem {...formItemLayout} label="结算类型" hasFeedback>
                                {getFieldDecorator('type', {
                                    rules: [{
                                        required: true, message: '请选择结算类型'
                                    }],
                                    initialValue: ''
                                })(
                                    <Select style={{width: '100%'}} disabled={this.props.disabled}
                                            onChange={this.setStatementType.bind(this)}>
                                        <Option value={"1"}>无订单结算</Option>
                                        <Option value={"2"}>有订单结算</Option>
                                    </Select>
                                )}
                            </FormItem></Col>
                    </Row>
                </Form>
            );
        }
    })
)

// WEBPACK FOOTER //
// ./public/src/components/order/components/AccountInfos.js